<template>
	<view class="app">
		<u-navbar placeholder="true" title="授权登录" :autoBack="true"></u-navbar>
		<view class="column center">
			<view>
				<image class="imag-logo" src="/static/images/logoy.png"></image>
			</view>
			<view class="logo-v1"><text class="logo-text1">群众缘婚介</text></view>
			<view class="logo-v2"><text class="logo-text2">QUN ZHONG YUAN HUN JIE</text></view>
		</view>
		<view class="center aeadfe">
			<button style="background: #f34f4f;" class="input-content row center" :loading="loading" v-if="showp" type="primary" @click="toProviderLogin">
				<!-- <button style="background: #f34f4f;" class="input-content row center" :loading="loading" v-if="showp" type="primary" @click="h5dde"> -->
				<u-icon name="weixin-fill" color="#FFFFFF" size="20"></u-icon>
				<text>微信授权登录</text>
			</button>

			<button class="input-content" :loading="loading" type="primary" open-type="getPhoneNumber" @getphonenumber="getphone" v-else>获取电话</button>
		</view>
		<view class="input-content-qx" @click="tabBarUrl()">取消</view>
		<view class="input-content-xy center">
			<u-checkbox-group @change="checkboxChange">
				<u-checkbox size="14" activeColor="red" :checked="protocol ? true : false" shape="circle"></u-checkbox>
				<text class="tx">我已阅读并同意</text>
				<text class="xiexyi">《用户协议》</text>
			</u-checkbox-group>
		</view>


		<u-popup customStyle="width: 700rpx;height: 1200rpx;padding: 30rpx;" closeable=true bgColor="#FFFFFF" :show="showtc" mode="center" @close="close">
			<u-parse :content="content"></u-parse>
		</u-popup>

		<!-- 头像+++++++++++++++++++++++++++++++++ -->
		<u-modal :show="showAuthorizeUser" @confirm="confirm">
			<view class="slot-content">
				<div class="auth-card">
					<div class="img">
						<img class="avatar-img" src="/static/images/logoy.png" mode="widthFix">
					</div>
					<div class="title">{{bname}}</div>
					<div class="content">邀请您补全个人信息<br></br>（昵称、头像）</div>
					<div style="margin-left: 100rpx;margin-right: 100rpx">
						<u-form :model="user" ref="uForm">
							<u-form-item label="头像">
								<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" slot="right">
									<image style="height: 40rpx;width: 45rpx;margin-top: 25rpx;" :src="avatarUrl"></image>
								</button>
							</u-form-item>
							<u-form-item label="昵称">
								<input type="nickname" class="weui-input" @blur="userNameInput" placeholder="请输入昵称" />
							</u-form-item>
						</u-form>
					</div>
				</div>
				<!--  <div class="auth-btncard">
		        <div class="btn-unok"><u-button :hair-line='false' :custom-style="customStyleUnOk" @click="showAuthorizeUser=false"> 拒绝</u-button></div>
		        <div class="btn-ok"><u-button :hair-line='false' :custom-style="customStyleOk" @click="authUser"> 允许</u-button></div>
		    </div> -->
			</view>
		</u-modal>
		<!-- 头像kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk -->

	</view>
</template>

<script>
	import auth_api from '@/api/auth.js';
	import api from '@/api/commonc.js';
	export default {
		data() {
			return {
				nickName: '', //昵称
				avatarUrl: '/static/xs/ttt.png',
				// 是否弹出登录注册授权弹窗
				showAuthorizeUser: false,
				content: '', // 内容
				showtc: false,
				protocol: false,
				userInfo: {},
				iv: '',
				encryptedData: '',
				code: '',
				session_key: '',
				superior: 0,
				openid: '',
				showp: true,
				loading: false // 提交中
			};
		},
		onShow() {
			this.getcode();
			this.getInfo();
		},
		onLoad(option) {
			var superior = uni.getStorageSync('superior');
			if (superior) {
				this.superior = superior;
			}
		},
		methods: {

			confirm() {
				if (!this.nickName) {
					this.$util.msg('请填写昵称');
					return;
				}
				if (this.avatarUrl == '/static/xs/ttt.png') {
					this.$util.msg('请选择头像');
					return;
				}
				this.showAuthorizeUser = false;
				this.showp = false;
			},
			//获取昵称输入内容
			userNameInput(e) {
				this.nickName = e.detail.value
			},
			async onChooseAvatar(e) {
				const url = await this.uploadFilePromise(e.detail.avatarUrl)
				this.avatarUrl = url
				console.log(this.avatarUrl)
			},
			async getInfo() {
				var data = await api.getInfo();
				this.content = data.data.content_protocol_uniapp;
			},
			close() {
				this.showtc = false;
			},
			checkboxChange() {
				this.$set(this, 'protocol', !this.protocol);
				if (this.protocol) {
					this.$set(this, 'showtc', !this.showtc);
				}

				console.log('protocol', this.protocol);
			},
			fanhui() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			tabBarUrl() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},


			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://qzy.dianteng.cc/admin/uploadImage', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'image',
						formData: {
							user: 'test'
						},
						success: res => {
							setTimeout(() => {
								var datajson = JSON.parse(res.data);
								console.log('datajson', datajson);
								resolve(datajson.data.url);
							}, 1000);
						}
					});
				});
			},


			async h5dde() {
				if (!this.protocol) {
					this.$util.msg('请阅读用户协议');
					return;
				}

				var _this = this;
				var openid = 'oEzOr4mWynFlNzWURtgyTSjwfM0c';
				const res = await auth_api.openidUserInfo({ openid: openid });
				console.log('第三步B,看是不是注册用户', res);
				if (res.data.id) {
					//已经注册
					_this.openid = openid;
					_this.userInfo['phone'] = res.data.phone;
					_this.userInfo['pr'] = res.data.pr;
					_this.id = res.data.id;

					this.loginSuccessCallBack({
						openid: _this.openid,
						userInfo: _this.userInfo
					});
					return;
				}
			},

			// 第3方授权登录
			toProviderLogin() {

				if (!this.protocol) {
					this.$util.msg('请阅读用户协议');
					return;
				}


				this.getServiceUserInfo({
					code: this.code
				});




				//获得头像，昵称

				// uni.getUserProfile({
				// 	desc: 'Wexin', // 这个参数是必须的
				// 	success: infoRes => {
				// 		console.log('第二步获取微信用户信息', infoRes);
				// 		this.userInfo = infoRes.userInfo;
				// 		this.iv = infoRes.iv;
				// 		this.encryptedData = infoRes.encryptedData;
				// 		this.getServiceUserInfo({
				// 			code: this.code
				// 		});
				// 	},
				// 	fail: err => {
				// 		console.log(err);
				// 		uni.hideLoading();
				// 	}
				// });

			},



			//获取code码
			getcode() {
				let that = this;
				uni.login({
					success: function(loginRes) {
						console.log('第一步获取code', loginRes);
						that.code = loginRes.code;
					},
					fail: function(err) {
						console.log(err);
					}
				});
			},

			// 获取应用内的认证授权信息
			async getServiceUserInfo(reqData) {
				let _this = this;
				// 获取openid

				const { code, message, data } = await auth_api.loginByProvider(reqData);
				console.log('第三步获取openid', data);
				if (data.openid) {
					const res = await auth_api.openidUserInfo({ openid: data.openid });
					console.log('第三步B,看是不是注册用户', res);
					if (res.data.id) {
						//已经注册
						_this.openid = data.openid;
						_this.userInfo['phone'] = res.data.phone;
						_this.userInfo['pr'] = res.data.pr;

						this.loginSuccessCallBack({
							openid: _this.openid,
							userInfo: _this.userInfo
						});
						return;
					}
				}

				uni.hideLoading();

				if (code != 200) {
					this.$util.msg(message);
					return;
				}
				let aa = data.openid;
				let bb = data.session_key;
				if (aa && bb) {
					_this.openid = aa;
					_this.session_key = bb;
					this.showAuthorizeUser = true
					return;
				} else {
					this.$util.msg('登录失败');
					this.navTo('/pages/auth/login');
				}
			},

			async getphone(e) {
				//获取code码
				let _this = this;
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					// console.log('154', e);
					_this.iv = e.detail.iv;
					_this.encryptedData = e.detail.encryptedData;

					_this.userInfo['nickName'] = _this.nickName
					_this.userInfo['avatarUrl'] = _this.avatarUrl


					console.log('111', _this.nickName)
					console.log('222', _this.avatarUrl)
					console.log('333', _this.userInfo)



					//获取手机号，增加用户微信信息
					const { code, message, data } = await auth_api.insetDatatwo({
						userInfo: _this.userInfo,
						openid: _this.openid,
						session_key: _this.session_key,
						iv: _this.iv,
						encryptedData: _this.encryptedData
					});

					console.log('第四步获取电话', data);

					_this.userInfo['phone'] = data.phone;
					_this.userInfo['pr'] = data.pr;
				}

				// 登录成功
				this.loginSuccessCallBack({
					openid: _this.openid,
					userInfo: _this.userInfo
				});
			},
			// 登录成功操作 vuex
			loginSuccessCallBack(data) {
				this.$util.msg('登录成功');
				// 状态管理保存用户信息
				this.$store.commit('setToken', data);
				setTimeout(() => {
					// this.navBack();
					uni.switchTab({
						url: '/pages/index/index'
					});
				}, 500);
			}
		}
	};
</script>

<style scoped lang="scss">
	.app {
		padding-top: 300rpx;
	}

	.u-content {
		background: red;
		width: 700rpx;

		margin-top: 10rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	button::after {
		border: none;
	}

	.imag-logo {
		height: 120rpx;
		width: 110rpx;

		margin-bottom: 20rpx;
	}

	.logo-v1 {
		margin-bottom: 20rpx;
	}

	.logo-text1 {
		width: 179rpx;
		height: 32rpx;
		font-size: 32rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
	}

	.logo-v2 {
		margin-bottom: 20rpx;
	}

	.logo-text2 {
		font-size: 23rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #b6b6b6;
	}

	.input-content {
		width: 580rpx;
		height: 86rpx;
		background: #f34f4f;
		// background: linear-gradient(90deg, #BB73D5, #643A92);
		// box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(100, 58, 146, 0.4);
		border-radius: 43rpx;
		text-align: center;
		font-size: 26rpx;
		line-height: 86rpx;
		position: absolute;
		bottom: 460rpx;
	}

	.input-content-qx {
		width: 100%;
		height: 86rpx;
		background: #ffffff;
		border-radius: 43rpx;
		text-align: center;
		font-size: 26rpx;
		line-height: 86rpx;
		position: absolute;
		bottom: 320rpx;

		font-size: 26rpx;
		font-family: PingFang;
		font-weight: bold;
		color: #000000;
	}

	.input-content-dh {
		width: 580rpx;
		height: 86rpx;
		background: #f34f4f;
		// background: linear-gradient(90deg, #BB73D5, #643A92);
		// box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(100, 58, 146, 0.4);
		border-radius: 43rpx;
		text-align: center;
		font-size: 26rpx;
		line-height: 86rpx;
		position: absolute;
		bottom: 200rpx;
	}

	.input-content-xy {
		width: 100%;
		height: 60rpx;
		// background: #f2f2f2;
		border-radius: 43rpx;
		text-align: center;
		font-size: 26rpx;
		position: absolute;
		bottom: 260rpx;

		font-size: 26rpx;
		font-family: PingFang;
		font-weight: bold;
		color: #000000;
	}

	.aeadfe {
		uni-button:after {
			border: 1rpx solid #f2f2f2;
		}
	}

	.tx {
		font-size: 23rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #999999;
		line-height: 34rpx;
	}

	.xiexyi {
		font-size: 23rpx;
		font-family: PingFang;
		font-weight: 500;
		color: red;
		line-height: 34rpx;
	}


	.auth-card {
		text-align: center;

		.avatar-img {
			width: 150rpx;
			height: 180rpx !important;
			// overflow: hidden;
			// border-radius: 100%;
			// margin-top: 30rpx;
		}

		.title {
			font-size: 20rpx;
		}

		.content {
			margin-top: 10rpx;
		}
	}

	.auth-btncard {
		.btn-unok {
			width: 50%;
			float: left;
		}

		.btn-ok {
			width: 50%;
			float: left;
			margin: 0;
			padding: 0;
			border: 0px solid transparent; //自定义边框
			outline: none; //消除默认点击蓝色边框效果

			u-button {
				margin: 0;
				padding: 0;
				border: 0px solid transparent; //自定义边框
				outline: none; //消除默认点击蓝色边框效果
			}
		}
	}
</style>


<style>
	.avatar-wrapper {
		width: 150rpx;
		height: 100rpx;
		color: #333 !important;
		text-align: center !important;
		border: none !important;
		border-radius: 0 !important;
		background-color: transparent !important;
	}

	.avatar-wrapper::after {
		border: none !important;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		overflow: hidden;
		border-radius: 100%;
	}
</style>